<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChrisKang - 个人主页</title>
    <link rel="stylesheet" href="导航菜单栏02.css" />
</head>

<body>

    <header class="navbar">
        <div class="container">
            <h1>ChrisKang</h1>
            <nav>
                <ul>
                    <li><a href="#about">关于我</a></li>
                    <li><a href="#services">服务</a></li>
                    <li><a href="#portfolio">作品集</a></li>
                    <li><a href="#contact">联系我</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <h2>欢迎来到我的世界</h2>
            <p>我是 ChrisKang，专注于前端开发与用户体验设计。</p>
        </div>
    </section>

    <section id="about" class="section">
        <div class="container">
            <h3>关于我</h3>
            <div class="about-content">
                <div class="about-image">
                    <img src="头像01.jpg" alt="ChrisKang 头像">
                </div>
                <div class="about-text">
                    <h4>你好！我是 ChrisKang</h4>
                    <p>一名热爱前端开发的工程师，拥有多年网页开发经验。我专注于构建高性能、响应式和用户体验友好的网站。</p>
                    <p>技术栈包括：HTML5、CSS3、JavaScript、React、Vue.js、Webpack 等现代前端技术。</p>
                    <ul class="skills">
                        <li>✨ 响应式网页设计</li>
                        <li>🎨 用户界面与交互设计</li>
                        <li>⚡ 前端性能优化</li>
                        <li>🛠️ 模块化与工程化开发</li>
                        <li>📱 移动优先策略</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section id="services" class="section">
        <div class="container">
            <h3>服务</h3>
            <div class="services-grid">
                <div class="service-item">
                    <i class="icon">💻</i>
                    <h4>网站设计与开发</h4>
                    <p>构建高性能、响应式的网站。</p>
                </div>
                <div class="service-item">
                    <i class="icon">📱</i>
                    <h4>响应式布局实现</h4>
                    <p>适配多种设备的网页布局。</p>
                </div>
                <div class="service-item">
                    <i class="icon">⚡</i>
                    <h4>前端性能优化</h4>
                    <p>提升页面加载速度和用户体验。</p>
                </div>
                <div class="service-item">
                    <i class="icon">🎨</i>
                    <h4>用户界面交互设计</h4>
                    <p>打造直观易用的用户界面。</p>
                </div>
            </div>
        </div>
    </section>
    <section id="portfolio" class="section">
        <div class="container">
            <h3>作品集</h3>
            <div class="portfolio-grid">
                <div class="item"><img src="project1.jpg" alt="项目1"></div>
                <div class="item"><img src="project2.jpg" alt="项目2"></div>
                <div class="item"><img src="project3.jpg" alt="项目3"></div>
            </div>
        </div>
    </section>
    <section id="contact" class="section">
        <div class="container">
            <h3>联系我</h3>
            <form action="#" method="post" class="contact-form">
                <input type="text" placeholder="您的姓名" required />
                <input type="email" placeholder="您的邮箱" required />
                <textarea placeholder="留言内容" required></textarea>
                <button type="submit">发送消息</button>
            </form>
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 ChrisKang. 保留所有权利。</p>
        </div>
    </footer>

</body>

</html>